

<template>
    <div style="height:455px;width:100%;position:relative;" v-if="!showGroup">
        <div class="pagetop">
            <table class="table1style">
                <tr>
                    <td>快速查找</td>
                    <td>
                        <el-input v-model="txtsearch" placeholder="项目代码|名称|输入码"></el-input>
                    </td>
                    <td>分单类别</td>
                    <td>
                        <rm-ddl-common @change="reqgroupChange" datatype="reqgroup" dataname="分单类别" v-model="ddlreqgroup" width="140px"></rm-ddl-common>
                    </td>
                    <td>项目归类</td>
                    <td>
                        <rm-ddl-rptitemclass @change="itemclassChange" v-model="ddlitemclass" width="140px"></rm-ddl-rptitemclass>
                    </td>
                    <td>
                        <el-button @click="query" icon="el-icon-search" type="primary">查询</el-button>
                    </td>
                    <td>
                        <el-button @click="btnConfirm" icon="el-icon-circle-check">确定</el-button>
                    </td>
                    <td>
                        <el-button @click="btnCancel" icon="el-icon-close">取消</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <vxe-table :data.sync="list" :loading="loading" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @cell-dblclick="btnConfirm" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row class="mytablestyle" highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column field="req_groupname" title="分单类别" width="60" sortable>
                        <template v-slot="{row}">
                            {{!row.req_groupname?"未归类":row.req_groupname}}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="req_itemname" title="项目名称" width="270" sortable></vxe-table-column>
                    <vxe-table-column field="item_price" title="单价" width="60" header-align="center" align="right" sortable> </vxe-table-column>
                    <vxe-table-column field="req_itemcode" title="项目代码" width="100" sortable></vxe-table-column>
                    <vxe-table-column field="his_itemcode" title="项目代码(HIS)" width="100" sortable></vxe-table-column>
                    <vxe-table-column field="his_itemname" title="项目名称(HIS)" width="135" sortable></vxe-table-column>
                    <vxe-table-column field="perform_dept" title="执行科室" width="90" sortable> </vxe-table-column>
                    <vxe-table-column field="inputcode" title="拼音码" width="90" sortable></vxe-table-column>
                </vxe-table>
            </div>
        </div>
    </div>
    <div style="height:455px;width:100%;position:relative;" v-else>
        <div class="pagetop">
            <table class="table1style">
                <tr>
                    <td>快速查找</td>
                    <td>
                        <el-input v-model="txtsearch" placeholder="项目代码|名称|输入码" clearable></el-input>
                    </td>
                    <td>分单类别</td>
                    <td>
                        <rm-ddl-common @change="reqgroupChange" datatype="reqgroup" dataname="分单类别" v-model="ddlreqgroup" width="140px"></rm-ddl-common>
                    </td>
                    <td>项目归类</td>
                    <td>
                        <rm-ddl-rptitemclass @change="itemclassChange" v-model="ddlitemclass" width="140px"></rm-ddl-rptitemclass>
                    </td>
                    <td>
                        <el-button @click="InitPage" icon="el-icon-search" type="primary">查询</el-button>
                    </td>
                    <td>
                        <el-button @click="btnConfirm" icon="el-icon-circle-check">确定</el-button>
                    </td>
                    <td>
                        <el-button @click="btnCancel" icon="el-icon-close">取消</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <rm-layout-right splitcolor="white" movingcolor="#0000ff" :splitwidth=5 :fixsize=683>
                    <template v-slot:fix>
                        <vxe-table :data.sync="grouplistdetail" :loading="loading" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showIcon:false}" @cell-dblclick="btnConfirm" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row class="mytablestyle" highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe :key="groupkey">
                            <!-- <vxe-table-column field="chkgroupflag" title="选择" width="50" v-if="multiChk" align="center">
                                <template v-slot="{row}">
                                    <el-checkbox true-label="1" false-label="0" v-model="row.chkgroupflag"></el-checkbox>
                                </template>
                            </vxe-table-column> -->
                            <vxe-table-column type="selection" width="50" v-if="multiChk" align="center"></vxe-table-column>
                            <vxe-table-column field="req_itemname" title="项目名称" width="139">
                            </vxe-table-column>
                            <vxe-table-column field="item_price" title="单价" width="70" header-align="center" align="right"> </vxe-table-column>
                            <vxe-table-column field="req_itemcode" title="项目代码" width="90">
                            </vxe-table-column>
                            <vxe-table-column field="his_itemcode" title="项目代码(HIS)" width="108">
                            </vxe-table-column>
                            <vxe-table-column field="his_itemname" title="项目名称(HIS)" width="135">
                            </vxe-table-column>
                            <vxe-table-column field="perform_dept" title="执行科室" width="95"> </vxe-table-column>
                            <vxe-table-column field="inputcode" title="拼音码" width="90">
                            </vxe-table-column>
                            <vxe-table-column field="req_groupna" title="分单类别简称" width="100">
                            </vxe-table-column>
                            <vxe-table-column field="req_itemna" title="申请项目简称" width="100">
                            </vxe-table-column>
                        </vxe-table>
                    </template>
                    <div style="height:100%;width:100%;background-color:#ddccbb;">
                        <vxe-table :data.sync="grouplist" :loading="loading" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @current-change="groupListChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row class="mytablestyle" highlight-hover-column ref="xTable1" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                            <vxe-table-column v-if="prono=='LIS251'" field="seq" title="序号" width="40">
                            </vxe-table-column>
                            <vxe-table-column field="req_groupname" title="分单类别" width="100">
                                <template v-slot="{row}">
                                    <span>{{row.req_groupname== null?"未分类":row.req_groupname}}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="samplecnt" title="数量" width="70">
                            </vxe-table-column>
                        </vxe-table>
                    </div>
                </rm-layout-right>

            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    props: { showGroup: { type: Boolean, default: false }, multiChk: { type: Boolean, default: false }, prono: { type: String, default: "", require: false, }, },
    data() {
        return {
            loading: false,
            txtsearch: "",
            ddlitemclass: "",
            ddlreqgroup: "",
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
                isArrow: true,
            },
            keyLocalConfig: {
                isArrow: true,
            },
            selectConfig: { tigger: "row" },
            tableData: [],
            groupTableData: [],
            curRow: [],
            groupkey: 0,
            chooseList: [],
            groupTableDataDetail: [],
            groupCount: 0,
        };
    },
    created() {
        this.InitPage(); //初始化主列表
        this.InitGroup(); //初始化分单列表
        //this.getinitdata(); //初始化下拉框的数据
    },
    watch: {
        txtsearch(val) {
            this.$nextTick(() => {
                this.loadFirstRow(this.$refs.xTable, "");
            });
        },
    },
    computed: {
        list() {
            let filterName = this.txtsearch.trim();
            if (filterName) {
                let rest = this.tableData.filter((item) => {
                    return item.req_itemcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.req_itemname ? item.req_itemname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
                });
                return rest;
            } else {
                return this.tableData;
            }
        },
        grouplist() {
            if(this.prono == 'LIS251'){
                if (this.tableData.length > 0) {
                    var data = this.groupTableDataDetail;
                    data.splice(0, 0, {seq:0, req_groupname: "全部", samplecnt: this.groupCount });
                    return data;
                }
            }
            else{
                if (this.tableData.length > 0) {
                    let data = this.group(this.tableData, function (item) {
                        return item.req_groupname;
                    });
                    data.splice(0, 0, { req_groupname: "全部", samplecnt: this.tableData.length });
                    return data;
                }
            }
        },
        grouplistdetail() {
            let filterName = this.txtsearch.trim();
            if (filterName) {
                let rest = this.groupTableData.filter((item) => {
                    return item.req_itemcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.req_itemname ? item.req_itemname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
                });
                return rest;
            } else {
                return this.groupTableData;
            }
        },
    },
    mounted() {},
    updated() {},
    methods: {
        group(list, f) {
            //分组函数
            const groups = {};
            list.forEach(function (re) {
                const group = f(re);
                groups[group] = groups[group] || [];
                groups[group].push(re);
            });
            return Object.keys(groups).map(function (group) {
                let groupLabel = group.split(","); //根据“，”切割成数组（可自定义）
                return {
                    req_groupname: groupLabel[0], //分单类别
                    samplecnt: groups[group].length, //数量
                };
            });
        },
        query(){
            this.InitPage();
            this.InitGroup();
        },
        InitPage() {
            if (this.$refs.xTable && this.$refs.xTable.getTableData().fullData.length > 0) this.$refs.xTable.clearAll();
            this.loading = true;
            this.$tool
                .request({
                    url: "ucent/ddl",
                    method: "post",
                    data: {
                        action: "ReqItem2",
                        ddlitemclass: this.ddlitemclass,
                        ddlreqgroup: this.ddlreqgroup,
                        prono: this.prono,
                    },
                })
                .then((res) => {
                    this.tableData = res.data;
                    if (!this.showGroup) {
                        this.loadFirstRow(this.$refs.xTable, "");
                    } else {
                        this.loadFirstRow(this.$refs.xTable1, this.groupListChange);
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        async InitGroup(){
            if(this.prono=='LIS251'){
                const res = await this.$tool.request({
                    url: "ucent/ddl",
                    method: "post",
                    data: {
                        action: "ReqItem2_Group",
                        ddlitemclass: this.ddlitemclass,
                        ddlreqgroup: this.ddlreqgroup,
                        prono: this.prono,
                    },
                });
                this.groupTableDataDetail = res.data;
                this.groupCount=res.count;
            }
        },
        reqgroupChange(code) {
            this.ddlreqgroup = code;
            this.InitPage();
            this.InitGroup();
        },
        itemclassChange(code) {
            this.ddlitemclass = code;
            this.InitPage();
            this.InitGroup();
        },
        btnConfirm({ row, column }) {
            if (this.multiChk) {
                //如果支持多选
                let data = this.$refs.xTable.getSelectRecords();
                // let data = this.tableData.filter((item) => item.chkgroupflag == "1");
                console.log("data", data);
                if (data.length > 0) {
                    var list = this.chooseList.concat(data);
                    this.$emit("change", list);
                    this.$emit("changeObj", {code:'', name:'', row:list});
                } else {
                    let arr = [];
                    arr.push(row);
                    this.$emit("change", arr);
                    this.$emit("changeObj", {code:'', name:'', row:arr});
                }
            } else {
                //不支持多选
                this.$emit("change", this.curRow.req_itemcode, this.curRow.req_itemname, this.curRow);
                this.$emit("changeObj", {code:this.curRow.req_itemcode, name:this.curRow.req_itemname, row:this.curRow});
            }
        },
        btnCancel() {
            this.$emit("cancel");
        },
        currentChangeEvent({ row }) {
            this.curRow = row;
        },
        groupListChangeEvent({ row }) {
            this.groupListChange(row);
        },
        groupListChange(row) {
            // this.groupkey++;
            this.chooseList = this.chooseList.concat(this.$refs.xTable.getSelectRecords());
            if (row.req_groupname == "null") {
                this.groupTableData = this.tableData.filter((item) => item.req_groupname == null);
            } else if (row.req_groupname == "全部") {
                this.groupTableData = this.tableData;
            } else {
                this.groupTableData = this.tableData.filter((item) => item.req_groupname == row.req_groupname);
            }
            //起码存在一条数据，不然分类不存在
            // this.curRow = this.groupTableData[0];
            //this.$refs.xTable.setCurrentRow(this.curRow);
            this.loadFirstRow(this.$refs.xTable, "");
        },
        //自动加载表格的第一行，并执行回调函数
        loadFirstRow(xTable, func) {
            this.$nextTick(() => {
                // 加载第一行
                var selectrow = xTable.getData(0);
                if (selectrow) {
                    xTable.setCurrentRow(selectrow).then(() => {
                        xTable.scrollToRow(selectrow).then(() => {
                            if (typeof func == "function") func(selectrow);
                            //滚动到行后操作，如用来高亮后赋值
                            else this.curRow = selectrow;
                        }); //滚动到行
                    }); //高亮行
                } else {
                    xTable.setCurrentRow(null); //这个不会自动清空
                }
            });
        },
    },
};
</Script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 400px;
    left: 0px;
    right: 0px;
    overflow: auto;
}
.table1style tr td {
    padding: 0px 2px 0px 2px;
    font-size: 12px;
}
</style>